import React, { Component } from 'react'
import axios from "../../util/axios"
import { connect } from "react-redux"
import { rclass } from "../../types/index"
import { Button } from 'antd';
interface Iprops {
    match: any,
    detailShop: (list: rclass) => void,
    detaildata: rclass[],
    addCartlist:(item:rclass) =>void
}
interface Istate {

}
export class Detail extends Component<Iprops, Istate> {
    componentDidMount() {
        axios.post('/api/detail', {
            id: this.props.match.params.id
        }).then(res => {
            this.props.detailShop(res.data.data.list)
        })
    }
    render() {
        let { detaildata } = this.props
        return (
            <div className="detail-page wrap">
                {
                    detaildata.length && detaildata.map((item: rclass) => {
                        return (
                            <dl className="detail-item" key={item.id}>
                                <dt></dt>
                                <dd>
                                    <p>
                                        {item.title}
                                    </p>
                                    <span>${item.price}</span>
                                    <Button onClick={()=>this.props.addCartlist(item)}>+</Button>
                                </dd>
                            </dl>
                        )
                    })
                }
            </div>
        )
    }
}
let stateMapToProps = (state: any) => {
    console.log(state)
    return {
        detaildata: state.list.detailList
    }
}
let DispatchMapToProps = (dispatch: any) => {
    return {
        //详情商品
        detailShop(list: rclass) {
            dispatch({ type: "DETAIL_SHOP", list })
        },
        //加入购物车
        addCartlist(item:rclass){
            dispatch({type:"ADD_CART",item})
        }
    }
}
export default connect(stateMapToProps, DispatchMapToProps)(Detail) 
